<template>
	<view>
		<u-tabs :list="tabLIst" scrollable='false' :current='current' @click="tabclick"  lineColor='#e8565c'></u-tabs>
		<view class="u-content" v-if="current == 0">
				<u-parse :content="content"></u-parse>
		</view>
		<view v-if="current ==1">
			 <view class="video">
				 <view class="video-list" v-for="(item,index) in videoList" :key='index' @click="tapPlay(item)">
					  <image class="video-list-stop" src="/static/play.png"></image>
					  <image class="video-list-img" :src="item.coverUrl"></image>
				 </view>
			 </view>
			
			<video id='myVideo' :class="[fullScreen ? 'show' :'hide']"  :src="mpUrl" autoplay="true"
			@fullscreenchange="tapfullScreen"  @ended="closeVideo"  controls></video>

		</view>
	</view>
</template>

<script>
	import {getCompetititonintroduceApi,getCompetititonfileApi} from '@/config/api.js'
	export default {
		data() {
			return {
				content:'',
				current:0,
				tabLIst:[
					{name:'赛事简介'},
					{name:'赛事视频'}
				],
				videoList:[],
				id:'',
				pageNum:1,
				pageSize:100,
				fileType:0,
				mpUrl:'',
				fullScreen:false,
				markShow:false
			};
		},
		onLoad(option) {
			  this.id = option.id
			  this.getVideo()
			 getCompetititonintroduceApi({
				 id:option.id
			 }).then(res=>{
				 this.content = res
				 
			 })
		},
		onReady: function(res) {
		        // #ifndef MP-ALIPAY
		        this.videoContext = uni.createVideoContext('myVideo')
		        // #endif
		    },
		methods:{
			tapPlay(e){
				this.mpUrl = e.fileUrl
				this.fullScreen = true
				// this.markShow =true
				this.videoContext.requestFullScreen();
				
				
			},
			tappuse(){
				this.videoContext.pause()
				this.markShow = false
			},
			tabclick(e){
				console.log(e)
				this.current = e.index
			},
			getVideo(){
				getCompetititonfileApi({
					 pageNum:this.pageNum,
					 pageSize:this.pageSize,
					 competitionId:this.id,
					 fileType:this.fileType
				}).then(res=>{
					this.videoList = res.records
				})
			},
			  /**播放视屏 */
			    play(e) {
			       //执行全屏方法  
			     
			       
			           this.fullScreen=true
			       
			    },
			    /**关闭视屏 */
			    closeVideo() {
			      //执行退出全屏方法
			      this.videoContext.exitFullScreen();     
			    },
			    /**视屏进入、退出全屏 */
			    tapfullScreen(e){
					console.log(e)
			      var isFull = e.detail.fullScreen;
			      //视屏全屏时显示加载video，非全屏时，不显示加载video
			     
			        this.fullScreen=isFull
			    
			    }

		}
	}
</script>

<style lang="scss" scoped>
	.video{
		// display: flex;
		// flex-wrap: wrap;
	.video-list{
		width: calc((100% - 60rpx)/2);
		margin-left: 20rpx;
		height: 200rpx;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
		display: inline-block;
		margin-bottom: 30rpx;
		&-img{
			width: 100%;
			height: 100%;
		}
		&-stop{
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	}
	
	}
	.show{
	   display:show;
	}
	.hide{
	   display:none;
	}
	.warp{
		position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
	}

</style>
